<!DOCTYPE html><html lang="en" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>SpringBoot-Vue-demo-01 | Lorem MoonのStory</title><meta name="keywords" content="SpringBoot,Vue"><meta name="author" content="Lorem Moon"><meta name="copyright" content="Lorem Moon"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="新建Vue3前端项目先删除之前的vue2版本npm uninstall -g vue-cli 安装新的vue cli 包npm install -g @vue&#x2F;cli 安装完成后使用命令：vue -V 检查是否安装成功 构建项目这里我们使用 vue3 提供的图形化界面操作： 打开 cmder，输入 vue  ui   默认操作即可了 安装依赖yarn  单页面spa应用 启动项目yarn run">
<meta property="og:type" content="article">
<meta property="og:title" content="SpringBoot-Vue-demo-01">
<meta property="og:url" content="https://hello-github-ui.github.io/posts/54629/index.html">
<meta property="og:site_name" content="Lorem MoonのStory">
<meta property="og:description" content="新建Vue3前端项目先删除之前的vue2版本npm uninstall -g vue-cli 安装新的vue cli 包npm install -g @vue&#x2F;cli 安装完成后使用命令：vue -V 检查是否安装成功 构建项目这里我们使用 vue3 提供的图形化界面操作： 打开 cmder，输入 vue  ui   默认操作即可了 安装依赖yarn  单页面spa应用 启动项目yarn run">
<meta property="og:locale" content="en_US">
<meta property="og:image" content="https://pic.imgdb.cn/item/612110704907e2d39c44f884.jpg">
<meta property="article:published_time" content="2020-06-14T15:39:28.000Z">
<meta property="article:modified_time" content="2022-03-08T12:34:42.574Z">
<meta property="article:author" content="Lorem Moon">
<meta property="article:tag" content="SpringBoot">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://pic.imgdb.cn/item/612110704907e2d39c44f884.jpg"><link rel="shortcut icon" href="/img/favicon.png"><link rel="canonical" href="https://hello-github-ui.github.io/posts/54629/"><link rel="preconnect" href="//cdn.jsdelivr.net"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/css/all.min.css" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css" media="print" onload="this.media='all'"><script>const GLOBAL_CONFIG = { 
  root: '/',
  algolia: {"appId":"D5QZVMNT9K","apiKey":"92de0b03da46fa778c95817524081160","indexName":"hexo-blog","hits":{"per_page":100},"languages":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}.","hits_stats":"${hits} results found in ${time} ms"}},
  localSearch: undefined,
  translate: undefined,
  noticeOutdate: {"limitDay":365,"position":"top","messagePrev":"It has been","messageNext":"days since the last update, the content of the article may be outdated."},
  highlight: {"plugin":"highlighjs","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":200},
  copy: {
    success: 'Copy successfully',
    error: 'Copy error',
    noSupport: 'The browser does not support'
  },
  relativeDate: {
    homepage: false,
    post: false
  },
  runtime: 'days',
  date_suffix: {
    just: 'Just',
    min: 'minutes ago',
    hour: 'hours ago',
    day: 'days ago',
    month: 'months ago'
  },
  copyright: undefined,
  lightbox: 'fancybox',
  Snackbar: undefined,
  source: {
    justifiedGallery: {
      js: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.js',
      css: 'https://cdn.jsdelivr.net/npm/flickr-justified-gallery@2/dist/fjGallery.min.css'
    }
  },
  isPhotoFigcaption: false,
  islazyload: false,
  isAnchor: false
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
  title: 'SpringBoot-Vue-demo-01',
  isPost: true,
  isHome: false,
  isHighlightShrink: true,
  isToc: true,
  postUpdate: '2022-03-08 20:34:42'
}</script><noscript><style type="text/css">
  #nav {
    opacity: 1
  }
  .justified-gallery img {
    opacity: 1
  }

  #recent-posts time,
  #post-meta time {
    display: inline !important
  }
</style></noscript><script>(win=>{
    win.saveToLocal = {
      set: function setWithExpiry(key, value, ttl) {
        if (ttl === 0) return
        const now = new Date()
        const expiryDay = ttl * 86400000
        const item = {
          value: value,
          expiry: now.getTime() + expiryDay,
        }
        localStorage.setItem(key, JSON.stringify(item))
      },

      get: function getWithExpiry(key) {
        const itemStr = localStorage.getItem(key)

        if (!itemStr) {
          return undefined
        }
        const item = JSON.parse(itemStr)
        const now = new Date()

        if (now.getTime() > item.expiry) {
          localStorage.removeItem(key)
          return undefined
        }
        return item.value
      }
    }
  
    win.getScript = url => new Promise((resolve, reject) => {
      const script = document.createElement('script')
      script.src = url
      script.async = true
      script.onerror = reject
      script.onload = script.onreadystatechange = function() {
        const loadState = this.readyState
        if (loadState && loadState !== 'loaded' && loadState !== 'complete') return
        script.onload = script.onreadystatechange = null
        resolve()
      }
      document.head.appendChild(script)
    })
  
      win.activateDarkMode = function () {
        document.documentElement.setAttribute('data-theme', 'dark')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
        }
      }
      win.activateLightMode = function () {
        document.documentElement.setAttribute('data-theme', 'light')
        if (document.querySelector('meta[name="theme-color"]') !== null) {
          document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
        }
      }
      const t = saveToLocal.get('theme')
    
          if (t === 'dark') activateDarkMode()
          else if (t === 'light') activateLightMode()
        
      const asideStatus = saveToLocal.get('aside-status')
      if (asideStatus !== undefined) {
        if (asideStatus === 'hide') {
          document.documentElement.classList.add('hide-aside')
        } else {
          document.documentElement.classList.remove('hide-aside')
        }
      }
    
    const detectApple = () => {
      if(/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)){
        document.documentElement.classList.add('apple')
      }
    }
    detectApple()
    })(window)</script><meta name="generator" content="Hexo 5.4.0"></head><body><div id="web_bg"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img is-center"><img src="https://pic.imgdb.cn/item/6159d89b2ab3f51d91b0e8d0.jpg" onerror="onerror=null;src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data is-center"><div class="data-item"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">60</div></a></div><div class="data-item"><a href="/tags/"><div class="headline">Tags</div><div class="length-num">46</div></a></div><div class="data-item"><a href="/categories/"><div class="headline">Categories</div><div class="length-num">5</div></a></div></div><hr/><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/musics/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div></div></div><div class="post" id="body-wrap"><header class="post-bg" id="page-header" style="background-image: url('https://pic.imgdb.cn/item/612110704907e2d39c44f884.jpg')"><nav id="nav"><span id="blog_name"><a id="site-name" href="/">Lorem MoonのStory</a></span><div id="menus"><div id="search-button"><a class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> Search</span></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/"><i class="fa-fw fas fa-home"></i><span> Home</span></a></div><div class="menus_item"><a class="site-page" href="/archives/"><i class="fa-fw fas fa-archive"></i><span> Archives</span></a></div><div class="menus_item"><a class="site-page" href="/tags/"><i class="fa-fw fas fa-tags"></i><span> Tags</span></a></div><div class="menus_item"><a class="site-page" href="/categories/"><i class="fa-fw fas fa-folder-open"></i><span> Categories</span></a></div><div class="menus_item"><a class="site-page group" href="javascript:void(0);"><i class="fa-fw fas fa-list"></i><span> List</span><i class="fas fa-chevron-down"></i></a><ul class="menus_item_child"><li><a class="site-page child" href="/musics/"><i class="fa-fw fas fa-music"></i><span> Music</span></a></li><li><a class="site-page child" href="/movies/"><i class="fa-fw fas fa-video"></i><span> Movie</span></a></li></ul></div><div class="menus_item"><a class="site-page" href="/link/"><i class="fa-fw fas fa-link"></i><span> Link</span></a></div><div class="menus_item"><a class="site-page" href="/about/"><i class="fa-fw fas fa-heart"></i><span> About</span></a></div></div><div id="toggle-menu"><a class="site-page"><i class="fas fa-bars fa-fw"></i></a></div></div></nav><div id="post-info"><h1 class="post-title">SpringBoot-Vue-demo-01<a class="post-edit-link" href="https://github.com/hello-github-ui/hexo-blog-source/tree/master/source/_posts/springboot-vue-demo-01.md" title="Edited on" target="_blank"><i class="fas fa-pencil-alt"></i></a></h1><div id="post-meta"><div class="meta-firstline"><span class="post-meta-date"><i class="far fa-calendar-alt fa-fw post-meta-icon"></i><span class="post-meta-label">Created</span><time class="post-meta-date-created" datetime="2020-06-14T15:39:28.000Z" title="Created 2020-06-14 23:39:28">2020-06-14</time><span class="post-meta-separator">|</span><i class="fas fa-history fa-fw post-meta-icon"></i><span class="post-meta-label">Updated</span><time class="post-meta-date-updated" datetime="2022-03-08T12:34:42.574Z" title="Updated 2022-03-08 20:34:42">2022-03-08</time></span><span class="post-meta-categories"><span class="post-meta-separator">|</span><i class="fas fa-inbox fa-fw post-meta-icon"></i><a class="post-meta-categories" href="/categories/code/">code</a></span></div><div class="meta-secondline"><span class="post-meta-separator">|</span><span class="post-meta-wordcount"><i class="far fa-file-word fa-fw post-meta-icon"></i><span class="post-meta-label">Word count:</span><span class="word-count">1.2k</span><span class="post-meta-separator">|</span><i class="far fa-clock fa-fw post-meta-icon"></i><span class="post-meta-label">Reading time:</span><span>5min</span></span><span class="post-meta-separator">|</span><span class="post-meta-pv-cv" id="" data-flag-title="SpringBoot-Vue-demo-01"><i class="far fa-eye fa-fw post-meta-icon"></i><span class="post-meta-label">Post View:</span><span id="busuanzi_value_page_pv"></span></span></div></div></div></header><main class="layout" id="content-inner"><div id="post"><article class="post-content" id="article-container"><h1 id="新建Vue3前端项目"><a href="#新建Vue3前端项目" class="headerlink" title="新建Vue3前端项目"></a>新建Vue3前端项目</h1><h2 id="先删除之前的vue2版本"><a href="#先删除之前的vue2版本" class="headerlink" title="先删除之前的vue2版本"></a>先删除之前的vue2版本</h2><p><code>npm uninstall -g vue-cli</code></p>
<h2 id="安装新的vue-cli-包"><a href="#安装新的vue-cli-包" class="headerlink" title="安装新的vue cli 包"></a>安装新的vue cli 包</h2><p><code>npm install -g @vue/cli</code></p>
<p>安装完成后使用命令：<code>vue -V</code> 检查是否安装成功</p>
<h2 id="构建项目"><a href="#构建项目" class="headerlink" title="构建项目"></a>构建项目</h2><p>这里我们使用 <code>vue3</code> 提供的图形化界面操作：</p>
<p>打开 <code>cmder</code>，输入 <code>vue  ui</code></p>
<p><img src="https://img.imgdb.cn/item/604b831b5aedab222ce8e535.png"></p>
<p><img src="https://img.imgdb.cn/item/604b83285aedab222ce8ebff.png"></p>
<p>默认操作即可了</p>
<h2 id="安装依赖"><a href="#安装依赖" class="headerlink" title="安装依赖"></a>安装依赖</h2><p><code>yarn </code></p>
<h2 id="单页面spa应用"><a href="#单页面spa应用" class="headerlink" title="单页面spa应用"></a>单页面spa应用</h2><p><img src="https://img.imgdb.cn/item/604b83475aedab222ce8fb9d.png"></p>
<h2 id="启动项目"><a href="#启动项目" class="headerlink" title="启动项目"></a>启动项目</h2><p><code>yarn run serve</code></p>
<p>单独运行成功，可以在  <code>/src/views/</code> 自己再编写一个 Book.vue 页面，然后在 <code>/src/router/index.js</code> 中进行注册，使用即可</p>
<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">    &lt;div&gt;</span><br><span class="line">        &lt;table&gt;</span><br><span class="line">            &lt;tr&gt;</span><br><span class="line">                &lt;td&gt;编号&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;封面url&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;书名&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;作者&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;出版日期&lt;/td&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">            &lt;tr v-for=&quot;item in books&quot;&gt;</span><br><span class="line">                &lt;td&gt;&#123;&#123;item.id&#125;&#125;&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;&#123;&#123;item.cover&#125;&#125;&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;&#123;&#123;item.title&#125;&#125;&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;&#123;&#123;item.author&#125;&#125;&lt;/td&gt;</span><br><span class="line">                &lt;td&gt;&#123;&#123;item.date&#125;&#125;&lt;/td&gt;</span><br><span class="line">            &lt;/tr&gt;</span><br><span class="line">        &lt;/table&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">    export default &#123;</span><br><span class="line">        name: &quot;Book&quot;,</span><br><span class="line">        data()&#123; // data是一个函数对象</span><br><span class="line">            return&#123;</span><br><span class="line">                books: [</span><br><span class="line">                    &#123;</span><br><span class="line">                        id: 1,</span><br><span class="line">                        cover: &#x27;https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg&#x27;,</span><br><span class="line">                        title: &#x27;红楼梦&#x27;,</span><br><span class="line">                        author: &#x27;清婉儿&#x27;,</span><br><span class="line">                        date: &#x27;2020-06-14&#x27;</span><br><span class="line">                    &#125;,</span><br><span class="line">                    &#123;</span><br><span class="line">                        id: 2,</span><br><span class="line">                        cover: &#x27;https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg&#x27;,</span><br><span class="line">                        title: &#x27;那一夜&#x27;,</span><br><span class="line">                        author: &#x27;卓文君&#x27;,</span><br><span class="line">                        date: &#x27;2020-06-14&#x27;</span><br><span class="line">                    &#125;,</span><br><span class="line">                    &#123;</span><br><span class="line">                        id: 3,</span><br><span class="line">                        cover: &#x27;https://i.loli.net/2019/04/10/5cadaa0d0759b.jpg&#x27;,</span><br><span class="line">                        title: &#x27;飞上你的床&#x27;,</span><br><span class="line">                        author: &#x27;上官飞燕&#x27;,</span><br><span class="line">                        date: &#x27;2020-06-14&#x27;</span><br><span class="line">                    &#125;</span><br><span class="line">                ]</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style scoped&gt;</span><br><span class="line"></span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<figure class="highlight plaintext"><table><tr><td class="code"><pre><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import VueRouter from &#x27;vue-router&#x27;</span><br><span class="line">import Home from &#x27;../views/Home.vue&#x27;</span><br><span class="line"></span><br><span class="line">// 引入 Book.vue</span><br><span class="line">import Book from &#x27;../views/Book&#x27;</span><br><span class="line"></span><br><span class="line">Vue.use(VueRouter)</span><br><span class="line"></span><br><span class="line">const routes = [</span><br><span class="line">    &#123;</span><br><span class="line">        path: &#x27;/&#x27;,</span><br><span class="line">        name: &#x27;Home&#x27;,</span><br><span class="line">        component: Home</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        path: &#x27;/about&#x27;,</span><br><span class="line">        name: &#x27;About&#x27;,</span><br><span class="line">        // 下面这是 vue3 的写法，这里我们还用vue2的写法注册组件</span><br><span class="line">        // this generates a separate chunk (about.[hash].js) for this route</span><br><span class="line">        // which is lazy-loaded when the route is visited.</span><br><span class="line">        component: () =&gt; import(/* webpackChunkName: &quot;about&quot; */ &#x27;../views/About.vue&#x27;)</span><br><span class="line">    &#125;,</span><br><span class="line">    &#123;</span><br><span class="line">        path: &#x27;/book&#x27;,</span><br><span class="line">        component: Book</span><br><span class="line">    &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">const router = new VueRouter(&#123;</span><br><span class="line">    mode: &#x27;history&#x27;,</span><br><span class="line">    base: process.env.BASE_URL,</span><br><span class="line">    routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">export default router</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<p><img src="https://img.imgdb.cn/item/604b83635aedab222ce90a88.png"></p>
<h1 id="编写后端spring-boot-代码"><a href="#编写后端spring-boot-代码" class="headerlink" title="编写后端spring boot 代码"></a>编写后端spring boot 代码</h1><h2 id="新建一个spring-boot-工程"><a href="#新建一个spring-boot-工程" class="headerlink" title="新建一个spring boot 工程"></a>新建一个spring boot 工程</h2><h2 id="按照下图所示完成工程的创建"><a href="#按照下图所示完成工程的创建" class="headerlink" title="按照下图所示完成工程的创建"></a>按照下图所示完成工程的创建</h2><p><img src="https://img.imgdb.cn/item/604b82815aedab222ce88c4d.png"></p>
<p><img src="https://img.imgdb.cn/item/604b82815aedab222ce88c53.png"></p>
<p><img src="https://img.imgdb.cn/item/604b82815aedab222ce88c5a.png"></p>
<p><img src="https://img.imgdb.cn/item/604b82815aedab222ce88c61.png"></p>
<h2 id="配置-application-yml"><a href="#配置-application-yml" class="headerlink" title="配置 application.yml"></a>配置 application.yml</h2><figure class="highlight yaml"><table><tr><td class="code"><pre><span class="line"><span class="attr">spring:</span></span><br><span class="line">    <span class="attr">datasource:</span></span><br><span class="line">        <span class="attr">url:</span> <span class="string">jdbc:mysql://localhost:3306/virgin</span> <span class="string">show?useUnicode=true&amp;characterEncoding=UTF-8&amp;serverTimezone=UTC</span></span><br><span class="line">        <span class="attr">username:</span> <span class="string">root</span></span><br><span class="line">        <span class="attr">password:</span> <span class="number">123456</span></span><br><span class="line">        <span class="attr">driver-class-name:</span> <span class="string">com.mysql.cj.jdbc.Driver</span></span><br><span class="line">    <span class="attr">jpa:</span></span><br><span class="line">        <span class="attr">show-sql:</span> <span class="literal">true</span></span><br><span class="line">        <span class="attr">properties:</span></span><br><span class="line">            <span class="attr">hibernate:</span></span><br><span class="line">                <span class="attr">format_sql:</span> <span class="literal">true</span></span><br><span class="line"><span class="attr">server:</span></span><br><span class="line">    <span class="attr">port:</span> <span class="number">8181</span></span><br></pre></td></tr></table></figure>

<p>注意这里采用这张表的数据</p>
<p><img src="https://img.imgdb.cn/item/604b82b55aedab222ce8ac29.png"></p>
<h2 id="编写实体类"><a href="#编写实体类" class="headerlink" title="编写实体类"></a>编写实体类</h2><figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="keyword">package</span> com.springboot.demo.entity;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> lombok.Data;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> javax.persistence.Entity;</span><br><span class="line"><span class="keyword">import</span> javax.persistence.Id;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author</span>: latinos-bub</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@date</span>: 2020/6/14 20:51</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@description</span>:</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@className</span>: Book</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="meta">@Entity</span> <span class="comment">// 采用jpa依赖后，使用该注解，会自动将该类与数据库中的相同名字的表进行映射(注意：类与表名必须一样，首字母除外)</span></span><br><span class="line"><span class="meta">@Data</span> <span class="comment">// lomback 自动提供getter/setter</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">Book</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">	<span class="meta">@Id</span> <span class="comment">// 标注 数据库表中的主键字段</span></span><br><span class="line">	<span class="keyword">private</span> Integer id;</span><br><span class="line">	String cover;</span><br><span class="line">	String title;</span><br><span class="line">	String author;</span><br><span class="line">	String date;</span><br><span class="line"></span><br><span class="line">    <span class="comment">// ... 这里的字段属性最多可以等于 表的字段，这里我们只取5个演示即可</span></span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line"></span><br></pre></td></tr></table></figure>

<h2 id="编写接口"><a href="#编写接口" class="headerlink" title="编写接口"></a>编写接口</h2><figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="keyword">package</span> com.springboot.demo.repository;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.springboot.demo.entity.Book;</span><br><span class="line"><span class="keyword">import</span> org.springframework.data.jpa.repository.JpaRepository;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author</span>: latinos-bub</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@date</span>: 2020/6/14 20:55</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@description</span>:</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@className</span>: BookRepository</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">interface</span> <span class="title">BookRepository</span> <span class="keyword">extends</span> <span class="title">JpaRepository</span>&lt;<span class="title">Book</span>, <span class="title">Integer</span>&gt; </span>&#123;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>在接口中，我们这里只需要继承 <code>JpaRepository&lt;T, id&gt;</code> 接口即可，同时也不需要注解该接口是 <code>@Repository</code>，以为继承的接口中已经说明了</p>
<h2 id="编写测试接口类"><a href="#编写测试接口类" class="headerlink" title="编写测试接口类"></a>编写测试接口类</h2><p>我们打开 <code>JpaRepository</code> 会发现有好多方法，这里我们只测试一下 <code>findAll</code> 方法</p>
<p>首先我们在 <code>BookRepository</code> 上右键：</p>
<p><img src="https://img.imgdb.cn/item/604b82c85aedab222ce8b862.png"></p>
<p>这样就新建了一个测试类</p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="keyword">package</span> com.springboot.demo.repository;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> org.junit.jupiter.api.Test;</span><br><span class="line"><span class="keyword">import</span> org.springframework.beans.factory.annotation.Autowired;</span><br><span class="line"><span class="keyword">import</span> org.springframework.boot.test.context.SpringBootTest;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="meta">@SpringBootTest</span></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">BookRepositoryTest</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">	<span class="meta">@Autowired</span> <span class="comment">// 一定要将接口注入</span></span><br><span class="line">	<span class="keyword">private</span> BookRepository book;</span><br><span class="line"></span><br><span class="line">	<span class="meta">@Test</span></span><br><span class="line">	<span class="function"><span class="keyword">void</span> <span class="title">findAll</span><span class="params">()</span></span>&#123;</span><br><span class="line"></span><br><span class="line">		System.out.println(book.findAll());</span><br><span class="line"></span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="运行测试即可"><a href="#运行测试即可" class="headerlink" title="运行测试即可"></a>运行测试即可</h2><p><img src="https://img.imgdb.cn/item/604b82d95aedab222ce8c0d6.png"></p>
<h2 id="编写控制器"><a href="#编写控制器" class="headerlink" title="编写控制器"></a>编写控制器</h2><p><img src="https://img.imgdb.cn/item/604b82ee5aedab222ce8cb8a.png"></p>
<figure class="highlight java"><table><tr><td class="code"><pre><span class="line"><span class="keyword">package</span> com.springboot.demo.controller;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.springboot.demo.entity.Book;</span><br><span class="line"><span class="keyword">import</span> com.springboot.demo.repository.BookRepository;</span><br><span class="line"><span class="keyword">import</span> org.springframework.beans.factory.annotation.Autowired;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.GetMapping;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.RequestMapping;</span><br><span class="line"><span class="keyword">import</span> org.springframework.web.bind.annotation.RestController;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@author</span>: latinos-bub</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@date</span>: 2020/6/14 21:53</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@description</span>:</span></span><br><span class="line"><span class="comment"> * <span class="doctag">@className</span>: BookHandler</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="meta">@RestController</span> <span class="comment">// restful 风格的 controller</span></span><br><span class="line"><span class="meta">@RequestMapping(&quot;/book&quot;)</span></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">BookHandler</span> </span>&#123;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">	<span class="meta">@Autowired</span> <span class="comment">// 一定要自动注入这个 接口</span></span><br><span class="line">	<span class="keyword">private</span> BookRepository bookRepository;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">	<span class="meta">@GetMapping(&quot;/findAll&quot;)</span> <span class="comment">// spring boot 独有的</span></span><br><span class="line">	<span class="function"><span class="keyword">public</span> List&lt;Book&gt; <span class="title">findAll</span><span class="params">()</span></span>&#123;</span><br><span class="line"></span><br><span class="line">		<span class="keyword">return</span> bookRepository.findAll();</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="运行findAll-控制方法"><a href="#运行findAll-控制方法" class="headerlink" title="运行findAll 控制方法"></a>运行findAll 控制方法</h2><p><img src="https://img.imgdb.cn/item/604b83015aedab222ce8d741.png"></p>
<h1 id="打通-springboot-和-vue"><a href="#打通-springboot-和-vue" class="headerlink" title="打通 springboot 和 vue"></a>打通 springboot 和 vue</h1><h2 id="先在-前端项目中安装-axios-模块"><a href="#先在-前端项目中安装-axios-模块" class="headerlink" title="先在 前端项目中安装 axios 模块"></a>先在 前端项目中安装 <code>axios</code> 模块</h2><p><code>vue add axios</code></p>
<p><img src="https://img.imgdb.cn/item/604b837c5aedab222ce916de.png"></p>
<p>安装成功后，会自动显示在 <code>/src/plugins/axios.js</code></p>
<p><img src="https://img.imgdb.cn/item/604b83895aedab222ce91d67.png"></p>
<h2 id="改造-Book-vue"><a href="#改造-Book-vue" class="headerlink" title="改造 Book.vue"></a>改造 <code>Book.vue</code></h2><p>在 vue 的生命周期中，<code>created</code> 的初始化先于 <code>data()</code> 函数，因此我们就在 <code>created</code> 中实现数据的请求</p>
<p><img src="https://img.imgdb.cn/item/604b83bb5aedab222ce937a7.png"></p>
<h2 id="跨域配置"><a href="#跨域配置" class="headerlink" title="跨域配置"></a>跨域配置</h2><p>我们选择在spring boot 后端进行配置</p>
<p><img src="https://img.imgdb.cn/item/604b83a75aedab222ce92c0f.png"></p>
<h2 id="运行截图"><a href="#运行截图" class="headerlink" title="运行截图"></a>运行截图</h2><p><img src="https://img.imgdb.cn/item/604b83cb5aedab222ce9413d.png"></p>
</article><div class="post-copyright"><div class="post-copyright__author"><span class="post-copyright-meta">Author: </span><span class="post-copyright-info"><a href="mailto:undefined">Lorem Moon</a></span></div><div class="post-copyright__type"><span class="post-copyright-meta">Link: </span><span class="post-copyright-info"><a href="https://hello-github-ui.github.io/posts/54629/">https://hello-github-ui.github.io/posts/54629/</a></span></div><div class="post-copyright__notice"><span class="post-copyright-meta">Copyright Notice: </span><span class="post-copyright-info">All articles in this blog are licensed under <a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a> unless stating additionally.</span></div></div><div class="tag_share"><div class="post-meta__tag-list"><a class="post-meta__tags" href="/tags/SpringBoot/">SpringBoot</a><a class="post-meta__tags" href="/tags/Vue/">Vue</a></div><div class="post_share"><div class="social-share" data-image="https://pic.imgdb.cn/item/612110704907e2d39c44f884.jpg" data-sites="facebook,twitter,wechat,weibo,qq"></div><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js/dist/css/share.min.css" media="print" onload="this.media='all'"><script src="https://cdn.jsdelivr.net/npm/social-share.js/dist/js/social-share.min.js" defer></script></div></div><div class="relatedPosts"><div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>Related Articles</span></div><div class="relatedPosts-list"><div><a href="/posts/54309/" title="SpringBoot-Vue-demo-02"><img class="cover" src="https://pic.imgdb.cn/item/612110704907e2d39c44f884.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-06-16</div><div class="title">SpringBoot-Vue-demo-02</div></div></a></div><div><a href="/posts/37143/" title="SpringBoot之Logback日志文件配置"><img class="cover" src="https://pic.imgdb.cn/item/6123bdb444eaada739c67806.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2021-08-23</div><div class="title">SpringBoot之Logback日志文件配置</div></div></a></div><div><a href="/posts/3499/" title="SpringBoot程序的部署及运行"><img class="cover" src="https://pic.imgdb.cn/item/612110704907e2d39c44f884.jpg" alt="cover"><div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i> 2020-01-06</div><div class="title">SpringBoot程序的部署及运行</div></div></a></div></div></div><hr/><div id="post-comment"><div class="comment-head"><div class="comment-headline"><i class="fas fa-comments fa-fw"></i><span> Comment</span></div></div><div class="comment-wrap"><div><div class="vcomment" id="vcomment"></div></div></div></div></div><div class="aside-content" id="aside-content"><div class="card-widget card-info"><div class="is-center"><div class="avatar-img"><img src="https://pic.imgdb.cn/item/6159d89b2ab3f51d91b0e8d0.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info__name">Lorem Moon</div><div class="author-info__description">即已成过往，便随它而去吧。</div></div><div class="card-info-data is-center"><div class="card-info-data-item"><a href="/archives/"><div class="headline">Articles</div><div class="length-num">60</div></a></div><div class="card-info-data-item"><a href="/tags/"><div class="headline">Tags</div><div class="length-num">46</div></a></div><div class="card-info-data-item"><a href="/categories/"><div class="headline">Categories</div><div class="length-num">5</div></a></div></div><a class="button--animated" id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xxxxxx"><i class="fab fa-github"></i><span>Follow Me</span></a><div class="card-info-social-icons is-center"><a class="social-icon" href="https://github.com/hello-github-ui" target="_blank" title="Github"><i class="fab fa-github"></i></a><a class="social-icon" href="mailto:util.you.come@gmail.com" target="_blank" title="Email"><i class="fas fa-envelope"></i></a></div></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn card-announcement-animation"></i><span>Announcement</span></div><div class="announcement_content">This is my Blog</div></div><div class="sticky_layout"><div class="card-widget" id="card-toc"><div class="item-headline"><i class="fas fa-stream"></i><span>Catalog</span><span class="toc-percentage"></span></div><div class="toc-content"><ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%96%B0%E5%BB%BAVue3%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE"><span class="toc-number">1.</span> <span class="toc-text">新建Vue3前端项目</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%88%E5%88%A0%E9%99%A4%E4%B9%8B%E5%89%8D%E7%9A%84vue2%E7%89%88%E6%9C%AC"><span class="toc-number">1.1.</span> <span class="toc-text">先删除之前的vue2版本</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E6%96%B0%E7%9A%84vue-cli-%E5%8C%85"><span class="toc-number">1.2.</span> <span class="toc-text">安装新的vue cli 包</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9E%84%E5%BB%BA%E9%A1%B9%E7%9B%AE"><span class="toc-number">1.3.</span> <span class="toc-text">构建项目</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%89%E8%A3%85%E4%BE%9D%E8%B5%96"><span class="toc-number">1.4.</span> <span class="toc-text">安装依赖</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E9%A1%B5%E9%9D%A2spa%E5%BA%94%E7%94%A8"><span class="toc-number">1.5.</span> <span class="toc-text">单页面spa应用</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%90%AF%E5%8A%A8%E9%A1%B9%E7%9B%AE"><span class="toc-number">1.6.</span> <span class="toc-text">启动项目</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E5%90%8E%E7%AB%AFspring-boot-%E4%BB%A3%E7%A0%81"><span class="toc-number">2.</span> <span class="toc-text">编写后端spring boot 代码</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%B0%E5%BB%BA%E4%B8%80%E4%B8%AAspring-boot-%E5%B7%A5%E7%A8%8B"><span class="toc-number">2.1.</span> <span class="toc-text">新建一个spring boot 工程</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%8C%89%E7%85%A7%E4%B8%8B%E5%9B%BE%E6%89%80%E7%A4%BA%E5%AE%8C%E6%88%90%E5%B7%A5%E7%A8%8B%E7%9A%84%E5%88%9B%E5%BB%BA"><span class="toc-number">2.2.</span> <span class="toc-text">按照下图所示完成工程的创建</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E9%85%8D%E7%BD%AE-application-yml"><span class="toc-number">2.3.</span> <span class="toc-text">配置 application.yml</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E5%AE%9E%E4%BD%93%E7%B1%BB"><span class="toc-number">2.4.</span> <span class="toc-text">编写实体类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E6%8E%A5%E5%8F%A3"><span class="toc-number">2.5.</span> <span class="toc-text">编写接口</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E6%B5%8B%E8%AF%95%E6%8E%A5%E5%8F%A3%E7%B1%BB"><span class="toc-number">2.6.</span> <span class="toc-text">编写测试接口类</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C%E6%B5%8B%E8%AF%95%E5%8D%B3%E5%8F%AF"><span class="toc-number">2.7.</span> <span class="toc-text">运行测试即可</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%BC%96%E5%86%99%E6%8E%A7%E5%88%B6%E5%99%A8"><span class="toc-number">2.8.</span> <span class="toc-text">编写控制器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E8%A1%8CfindAll-%E6%8E%A7%E5%88%B6%E6%96%B9%E6%B3%95"><span class="toc-number">2.9.</span> <span class="toc-text">运行findAll 控制方法</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%89%93%E9%80%9A-springboot-%E5%92%8C-vue"><span class="toc-number">3.</span> <span class="toc-text">打通 springboot 和 vue</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%85%88%E5%9C%A8-%E5%89%8D%E7%AB%AF%E9%A1%B9%E7%9B%AE%E4%B8%AD%E5%AE%89%E8%A3%85-axios-%E6%A8%A1%E5%9D%97"><span class="toc-number">3.1.</span> <span class="toc-text">先在 前端项目中安装 axios 模块</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%94%B9%E9%80%A0-Book-vue"><span class="toc-number">3.2.</span> <span class="toc-text">改造 Book.vue</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%B7%A8%E5%9F%9F%E9%85%8D%E7%BD%AE"><span class="toc-number">3.3.</span> <span class="toc-text">跨域配置</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BF%90%E8%A1%8C%E6%88%AA%E5%9B%BE"><span class="toc-number">3.4.</span> <span class="toc-text">运行截图</span></a></li></ol></li></ol></div></div><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>Recent Post</span></div><div class="aside-list"><div class="aside-list-item"><a class="thumbnail" href="/posts/4723/" title="Redis主从搭建"><img src="https://pic.imgdb.cn/item/61210fda4907e2d39c439d0c.jpg" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Redis主从搭建"/></a><div class="content"><a class="title" href="/posts/4723/" title="Redis主从搭建">Redis主从搭建</a><time datetime="2022-03-08T12:34:42.574Z" title="Created 2022-03-08 20:34:42">2022-03-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/43818/" title="Win10开启上帝模式"><img src="https://pic.imgdb.cn/item/621ddc1c2ab3f51d914c66cb.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Win10开启上帝模式"/></a><div class="content"><a class="title" href="/posts/43818/" title="Win10开启上帝模式">Win10开启上帝模式</a><time datetime="2022-03-08T12:24:42.000Z" title="Created 2022-03-08 20:24:42">2022-03-08</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/55966/" title="Ubuntu修改静态IP"><img src="https://pic.imgdb.cn/item/621ddc1c2ab3f51d914c66cb.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Ubuntu修改静态IP"/></a><div class="content"><a class="title" href="/posts/55966/" title="Ubuntu修改静态IP">Ubuntu修改静态IP</a><time datetime="2022-03-04T16:11:25.000Z" title="Created 2022-03-05 00:11:25">2022-03-05</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/42154/" title="Java封装同步锁"><img src="https://pic.imgdb.cn/item/621ddc1c2ab3f51d914c66cb.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="Java封装同步锁"/></a><div class="content"><a class="title" href="/posts/42154/" title="Java封装同步锁">Java封装同步锁</a><time datetime="2022-03-02T12:50:01.000Z" title="Created 2022-03-02 20:50:01">2022-03-02</time></div></div><div class="aside-list-item"><a class="thumbnail" href="/posts/1553/" title="初识大数据(一)"><img src="https://cdn.jsdelivr.net/gh/jerryc127/CDN@latest/cover/default_bg3.png" onerror="this.onerror=null;this.src='/img/404.jpg'" alt="初识大数据(一)"/></a><div class="content"><a class="title" href="/posts/1553/" title="初识大数据(一)">初识大数据(一)</a><time datetime="2022-03-01T07:53:43.000Z" title="Created 2022-03-01 15:53:43">2022-03-01</time></div></div></div></div></div></div></main><footer id="footer" style="background-image: url('https://pic.imgdb.cn/item/612110704907e2d39c44f884.jpg')"><div id="footer-wrap"><div class="copyright">&copy;2017 - 2022 By Lorem Moon</div><div class="framework-info"><span>Framework </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo</a><span class="footer-separator">|</span><span>Theme </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly</a></div><div class="footer_custom_text">Hi, welcome to my <a target="_blank" rel="noopener" href="https://hello-blogger-ui.blogspot.com/">google blog</a>!</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="readmode" type="button" title="Read Mode"><i class="fas fa-book-open"></i></button><button id="darkmode" type="button" title="Switch Between Light And Dark Mode"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="Toggle between single-column and double-column"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside_config" type="button" title="Setting"><i class="fas fa-cog fa-spin"></i></button><button class="close" id="mobile-toc-button" type="button" title="Table Of Contents"><i class="fas fa-list-ul"></i></button><a id="to_comment" href="#post-comment" title="Scroll To Comments"><i class="fas fa-comments"></i></a><button id="go-up" type="button" title="Back To Top"><i class="fas fa-arrow-up"></i></button></div></div><div id="algolia-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">Algolia</span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="search-wrap"><div id="algolia-search-input"></div><hr/><div id="algolia-search-results"><div id="algolia-hits"></div><div id="algolia-pagination"></div><div id="algolia-stats"></div></div></div></div><div id="search-mask"></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script><script src="https://cdn.jsdelivr.net/npm/algoliasearch@4/dist/algoliasearch-lite.umd.js"></script><script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4/dist/instantsearch.production.min.js"></script><script src="/js/search/algolia.js"></script><div class="js-pjax"><script>function loadValine () {
  function initValine () {
    const valine = new Valine(Object.assign({
      el: '#vcomment',
      appId: 'mFM6i90bN6KqyTH6tmC3q7dz-gzGzoHsz',
      appKey: 'T2tsKoiKjMaB0wgtIAgSz6Ul',
      avatar: 'monsterid',
      serverURLs: '',
      emojiMaps: "",
      path: window.location.pathname,
      visitor: false
    }, null))
  }

  if (typeof Valine === 'function') initValine() 
  else getScript('https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js').then(initValine)
}

if ('Valine' === 'Valine' || !false) {
  if (false) btf.loadComment(document.getElementById('vcomment'),loadValine)
  else setTimeout(loadValine, 0)
} else {
  function loadOtherComment () {
    loadValine()
  }
}</script></div><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script></div></body></html>